<template>
  <el-tabs v-model="activeName" @tab-click="handleClickTab">
    <el-tab-pane label="媒资列表" name="media">
      <content-project-media ref="projectMediaRef" />
    </el-tab-pane>
    <el-tab-pane label="频道栏目" name="channel">
      <content-project-channel ref="projectChannelRef" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import {ref, nextTick} from 'vue'
  import ContentProjectMedia from "./ContentProjectMedia";
  import ContentProjectChannel from "./ContentProjectChannel";
  export default {
    name: "PackageProject",
    components: {ContentProjectMedia, ContentProjectChannel},
    setup() {
      const activeName = ref('media')
      const projectChannelRef = ref(null)
      const projectMediaRef = ref(null)
      const handleClickTab = (tab) => {
        if (tab.props.name == 'channel') {
          nextTick(() => {
            projectChannelRef.value.init()
          })
        } else {
          nextTick(() => {
            projectMediaRef.value.init()
          })
        }
      }
      return {
        activeName,
        projectChannelRef,
        handleClickTab,
        projectMediaRef
      }
    }
  }
</script>

<style scoped>

</style>
